<template>
	<view>
		<!--用户头像和昵称-->
		<view class="userInformation">
			<view class="userInfomation-avatar">
				<open-data type="userAvatarUrl"></open-data>
				<!-- <button  type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
					<image :src="avatarUrl" class="refreshIcon" style="margin-top: 0rpx; width:170rpx;height:150rpx;"></image>
				</button> -->
			</view>
			<view class="userInformation-nickname">
				<open-data type="userNickName"></open-data>
				<!-- <text class="weui-text">昵称：</text> -->
				<!-- <input type="nickname" class="weui-input" 
				    :value="nickName" @blur="bindblur" placeholder="请输入昵称" @input="bindinput"/> -->
				
			</view>
		</view>
		<!--间隔灰横条-->
		<view class="graydivide"></view>
		
		<view class='function'>
			<view style="width:100%">
				<view class="functioninformation" @click="myDevice">
					<!--左边图片&文字-->
					<view class="left-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/myDevice.png"></image>
					</view>
					<view class="text" >我的设备(My Device)</view>
					<!--文字-->
					<view class="right-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/right.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!--间隔灰横条-->
		<view class="graydivide"></view>

		<view class='function'  @click="afterSalesRecord">
			<view style="width:100%">
				<view class="functioninformation" >
					<!--左边图片&文字-->
					<view class="left-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/shouhou.png"></image>
					</view>
					<view class="text">售后记录(After-sales Record)</view>
					<!--文字-->
					<view class="right-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/right.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!--间隔白横线-->
		<view class="whitedivide"></view>

		<view class='function'>
			<view style="width:100%">
				<view class="functioninformation" @click="myApply">
					<!--左边图片&文字-->
					<view class="left-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/shenqing.png"></image>
					</view>
					<view class="text">绑定申请(Binding Application)</view>
					<!--文字-->
					<view class="right-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/right.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!--间隔白横线-->
		<view class="whitedivide"></view>

		<view class='function'>
			<view style="width:100%">
				<view class="functioninformation" @click="clientUserManual">
					<!--左边图片&文字-->
					<view class="left-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/zanwu.png"></image>
					</view>
					<view class="text">客户端使用手册</view>
					<!--文字-->
					<view class="right-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/right.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!--间隔白横线-->
		<view class="whitedivide"></view>
		<view class='function'>
			<view style="width:100%">
				<view class="functioninformation">
					<!--左边图片&文字-->
					<view class="left-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/zanwu.png"></image>
					</view>
					<view class="text">暂定功能(null)</view>
					<!--文字-->
					<view class="right-icon">
						<!--图片-->
						<image class="icon-picture" src="/static/right.png"></image>
					</view>
				</view>
			</view>
		</view>
		<button class="log-out" @click="logOutBt"> 退出登录(Log Out) </button>
		<!-- <userTab selectedIndex = 2></userTab> -->
		<userTab ></userTab>
	</view>
</template>

<script>
	// import userTab from '@/pages/UserTabBar/userTab.vue'
	
	
	export default {
		// components: {
		//     'view-tabbar': userTab
		// },
	  data() {
	  	return {
			avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
	  	}
	  },
	  onLoad() {
	  	
	  },
	 
	  methods: {
		  // 选择昵称 
		  // bindblur(e) {
			 //   console.log('nickName', e)
			 //   this.nickName = e.detail.value;
		  //  },
		  // //昵称输入框input
		  //  bindinput(e) {
			 //   console.log('nickName', e)
			 //   this.nickName = e.detail.value;
		  //  },
		  
		  //选择头像
		// onChooseavatar(e) {
		// 	console.log(e.detail);
		// 	this.avatarUrl = e.detail.avatarUrl;
		// },
	    afterSalesRecord(){
			console.log("点击了售后记录*************")
			uni.navigateTo({
				url: "/pages/clientVue/afterSalesRecord"
				
			})
		},
		logOutBt(){
			console.log('点击了退出登录',uni.getStorageSync("identify"))
			try{
				uni.clearStorageSync()  //清楚所有缓存  
				console.log('清除-------',uni.getStorageSync("identify"))
				uni.navigateTo({
				url: '/pages/index/index'
				})
			}catch(e){
				uni.showToast({
					title: e,
					duration:2000,
					icon:'none'
				})
			}
			
		},
		myDevice(){
			console.log("点击了我的设备")
			uni.navigateTo({
				url: '/pages/clientVue/myDevice'
			})
		},
		myApply(){
			console.log('点击了 绑定申请')
			uni.navigateTo({
				url: '/pages/clientVue/myApply'
			})
		},
		clientUserManual(){
			try {
				const url = 'https://after.smacaftersales.com:9999/instructions/客户.pdf';  
				this.PDFView.downloadAndOpenFile(url)
			} catch (err) {  
				// console.error('文件下载或打开失败:', err);  
				uni.showToast({
					title: "文件下载或打开失败",
					duration: 1500,
					icon:'none'
				})
			
			} 
		}
		
	  },
	  onShow() {
	  
	  }
	}
</script>

<style>
	/* .weui-input{
	   border: 1px solid gray;
	    border-radius: 10rpx;
	    height:66rpx;
	    font-size: 24rpx;
	    width:320rpx;
	    margin-left: 20rpx;
	}
	.weui-text{
	    height:66rpx;
	    font-size: 40rpx;
	    line-height:66rpx;
	    width:140rpx;
	    margin-left: 20rpx;
	} */
	
	.userInformation {
		/*头像&微信名称*/
		display: flex;
		background-color: #ffffff;
	}

	.userInfomation-avatar {
		/*头像*/
		background-color: #ffffff;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		overflow: hidden;
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx;
		margin-top: 30rpx;
		margin-left: 40rpx;
		border-color: #ffffff;
	}

	.userInformation-nickname {
		/*昵称*/
		color: #000000;
		font-size: 22px;
		font-weight: bold;
		width: 320rpx;
		height: 120px;
		line-height: 120px;
		
		
	}

	.whitedivide {
		/*白色分割线*/
		height: 1px;
		background-color: #e2e2e2;
		width: 100%;
		position: relative;
		top: 0px;
	}

	.graydivide {
		/*灰色分割条*/
		height: 10px;
		background-color: #ededed;
		position: relative;
		top: 0px;
	}

	.function {
		width: 100%;
		background-color: #ffffff;
		margin-top: 0rpx;
		overflow: hidden;
		display: flex;
		/**/
	}

	.functioninformation {
		/*左边动作图标&文字说明*/
		display: flex;
	}

	.left-icon {
		display: flex;
		margin: 14px;
	}

	.icon-picture {
		/*图标*/
		display: flex;
		width: 28px;
		height: 28px;
	}

	.text {
		/*文字*/
		font-size: 14px;
		font-style: normal;
		font-weight: normal;
		width: 200px;
		position: relative;
		left: 0px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: gray;
	}

	.right-icon {
		/*右边图片*/
		display: flex;
		margin: 14px;
		position: absolute;
		right: 14px;
	}
	/* 退出登录   */
	.log-out{
		width: 200px;
		height: 50px;
		display: flex;
		margin-top: 60px;
		justify-content: center;
		border-radius: 25px;	
		border: 3rpx solid #6699FF;
		
	}
</style>
